{% extends 'backend.html.twig' %}

{% block body %}
    <button id="act_create">Create</button>
    <button id="act_reload">Reload</button>
    <div id="wrapper">
        <table border="1" cellspacing="0">
            <thead>
            <tr>
                <th>ID</th>
                <th>Material Name</th>
                <th>Number</th>
                <th>Create time</th>
                <th>Finish time</th>
                <th>Action</th>
            </tr>
            </thead>
            <tbody id="table_body">
            {% for item in list %}
                <tr>
                    <td>{{ item.oid }}</td>
                    <td>{{ item.material_name }}</td>
                    <td>{{ item.number }}</td>
                    <td>{{ item.create_at }}</td>
                    <td>{{ item.finish_at }}</td>
                    <td>
                        {% if item.finish_at %}

                        {% else %}
                            <button class="act-finish" data-oid="{{ item.oid }}">finish</button>
                        {% endif %}
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>

{% endblock %}
{% block javascripts %}
    <script>
        (function ($) {
            $(function () {
                var select_content = false;
                var material_map = {};
                var flag = false;
                var reload = function () {
                    location.reload();
                };

                $("#act_create").click(function () {
                    if (!select_content) {
                        $.ajax({
                            async: false,
                            url: "{{ asset("material/map") }}",
                            method: "GET",
                            success: function (res) {
                                if (res.code === 0) {
                                    material_map = res.data;
                                    select_content = "<select id='material_select'>";
                                    for (var x in material_map) {
                                        select_content += "<option value=" + x + ">" + material_map[x]["name"] + "</option>";
                                    }
                                    select_content += "</select>";
                                    flag = true;
                                } else {
                                    flag = false;
                                    return layer.msg(res.message);
                                }
                            }
                        });
                    }
                    flag && layer.open({
                        title: 'Add Material',
                        content: select_content + '<br>' +
                        '<input id="material_number" required>',
                        yes: function () {
                            var mid = $("#material_select").val();
                            var mname = material_map[mid].name;
                            if ($("[data-mid=" + mid + "]").length) {
                                return layer.msg("Material " + mname + " exist");
                            }
                            var number = $("#material_number").val();
                            $.post("{{ asset("material/order/create") }}", {
                                mid: mid,
                                number: number
                            }, function (res) {
                                if (!res.code) {
                                    reload();
                                    layer.closeAll();
                                }
                                layer.msg(res.message);
                            });
                        }
                    });
                });

                $(".act-finish").click(function () {
                    var ele = $(this);
                    var order_id = ele.attr("data-oid");
                    console.log(order_id);
                    $.post("{{ asset("material/order/finish") }}", {
                        oid: order_id
                    }, function (res) {
                        if (!res.code) {
                            reload();
                        } else {
                            layer.msg(res.message);
                        }
                    })
                });

            });
        })(jQuery);
    </script>


{% endblock %}
